import React, { Component } from 'react'
// 引入store
import store from '../store'

export default class Redux extends Component {
    constructor() {
        super();
        this.state = {
            myName: '',
            list: []
        }
    }
    // 通过action修改age
    changeAge() {
        store.dispatch({type: 'ageAdd'})
    }
    // 通过action修改name
    changeName() {
        // console.log(this.state.myName);
        store.dispatch({type: 'nameChange', val: this.state.myName})
    }
    // 通过action删除指定商品
    del(id) {
        // console.log(id);
        store.dispatch({type: 'delGoods', id})
    }
    componentDidMount() {
        // subscribe 订阅 监听数据的变化，每当数据更新时，函数会自动执行
        this.fn = store.subscribe(()=>{
            // console.log('我更新了。。。', store.getState());
            this.setState(store.getState())
        })
        // 从store中获取数据 给state
        // getState返回store中的state对象。setState需要一个对象
        this.setState(store.getState(), ()=>{
            console.log(this.state.list);
        });
    }
    componentWillUnmount() {
        // 为了性能优化以及避免报错，在离开页面时要取消订阅.方式是再次执行subscribe
        this.fn()
    }
    getName(e) {
        this.setState({
            myName: e.target.value
        })
    }
    render() {
        return (
            <div>
                <p>redux的使用</p>
                <p>{this.state.name}</p>
                <input value={this.state.myName} onChange={(e)=>this.getName(e)} placeholder='新的名字'></input>
                <button onClick={() => this.changeAge()}>{this.state.age}</button>
                <button onClick={() => this.changeName()}>改名字</button>
                <ul>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <li key={index}>
                                    {item.name}-¥{item.price}--{item.num}斤
                                    <button onClick={()=>this.del(item.id)}>del</button>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}
